<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery </title>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(function() {
				
				$("#btnAdd").click(function() {
					let f = $("#fruit");
					let n = window.prompt("新增水果：");
					if (!n)
						return;
					//f.append("<li>"+n+"</li>");
					f.append(`<li>${n}</li>`);
				});
				//有问题，新增元素不行
				$("#fruit li").bind({
					"mouseover": function() {
						//this
						$(this).css("font-size", "60px");
					},
					"mouseout": function() {
						$(this).css("font-size", "14px");
					},
				});
			});
		</script>
	</head>
	<body>
		<ul id="fruit">
			<li>苹果</li>
			<li>梨子</li>
			<li>西红柿</li>
			<li>椰子</li>
			<li>葡萄</li>
		</ul>
		<button id="btnAdd">ADD</button>
	</body>
</html>
